<template>
  <div class="query-container">
    <condition :form-list="formList" @query="query"></condition>
    <tablePagination ref="tablePagination" :columns="columns" :table-data="tableData" @getTableData="getTableData"></tablePagination>
  </div>
</template>

<script>
  import Condition from '../components/query/condition';
  import TablePagination from '../components/query/tablePagination';
  export default {
    name: "searchComponent",
    components: {
      Condition,
      TablePagination
    },
    data() {
      return {
        formList: [
          {
            key: 'user',
            label: '文本输入框',
            defaultValue: '',
            placeholder: '请输入审批人',
            type: 'text',
            isShow: true
          },
          {
            key: 'select',
            label: '单选下拉框',
            type: 'select',
            isShow: true,
            list: [
              {
                label: '选项1',
                value: 'val1'
              },
              {
                label: '选项2',
                value: 'val2'
              }
            ]
          },
          {
            key: 'mSelect',
            label: '多选下拉框',
            type: 'mSelect',
            isShow: true,
            list: [
              {
                label: '选项1',
                value: 'val1'
              },
              {
                label: '选项2',
                value: 'val2'
              }
            ]
          },
          {
            key: 'time',
            label: '单时间',
            isShow: true,
            type: 'time'
          },
          {
            key: 'rTime',
            label: '范围时间',
            isShow: true,
            type: 'rTime'
          },
          {
            key: 'date',
            label: '单日期',
            isShow: true,
            type: 'date'
          },
          {
            key: 'rDate',
            label: '范围日期',
            isShow: true,
            type: 'rDate'
          },
        ],
        tbData: [
          {
            key1: '1',
            key2: '2',
            key3: '3'
          },
          {
            key1: '11',
            key2: '22',
            key3: '33'
          },
          {
            key1: '111',
            key2: '222',
            key3: '333'
          },
          {
            key1: '1',
            key2: '2',
            key3: '3'
          },
          {
            key1: '11',
            key2: '22',
            key3: '33'
          },
          {
            key1: '111',
            key2: '222',
            key3: '333'
          },
          {
            key1: '1',
            key2: '2',
            key3: '3'
          },
          {
            key1: '11',
            key2: '22',
            key3: '33'
          },
          {
            key1: '111',
            key2: '222',
            key3: '333'
          },
          {
            key1: '1',
            key2: '2',
            key3: '3'
          },
          {
            key1: '11',
            key2: '22',
            key3: '33'
          },
          {
            key1: '111',
            key2: '222',
            key3: '333'
          },
          {
            key1: '1',
            key2: '2',
            key3: '3'
          },
          {
            key1: '11',
            key2: '22',
            key3: '33'
          },
          {
            key1: '111',
            key2: '222',
            key3: '333'
          },
        ],
        tableData: [],
        columns: [
          {
            key: 'key1',
            label: '标题1'
          },
          {
            key: 'key2',
            label: '标题2'
          },
          {
            key: 'key3',
            label: '标题3'
          }
        ]
      }
    },
    methods: {
      query(val) {
        console.log(val);
        let tablePagination = this.$refs.tablePagination;
        this.getTableData({
          ...val,
          page: tablePagination.currentPage,
          pageSize: tablePagination.currentPageSize
        })
      },
      getTableData(param) {
        console.log('参数', param);
        this.tableData = this.tbData.slice(param.page-1, param.page * param.pageSize);
      }
    }
  }
</script>

<style scoped>
.query-container{
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
